<template>
	<view>
		<view class="top-bg">

		</view>
		<view class="content">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				:previous-margin="previousmargin" :next-margin="nextmargin" style="height: 100%;" @change="change"
				:current="current">
				<swiper-item v-for="(item, index) in recruitmentList" :key="index" style="height: 100%;">
					<view class="detail" :class="index == current? 'active' : ''">
						<scroll-view scroll-y="true" style="height: 70vh;">
							<view class="detail-content">
								<view class="job-title">{{item.post_name}}</view>
								<view class="job-describe-1">
									<view v-if="item.work_experience == 1">不限</view>
									<view v-if="item.work_experience == 2">在校生</view>
									<view v-if="item.work_experience == 3">应届生</view>
									<view v-if="item.work_experience == 4">1年以内</view>
									<view v-if="item.work_experience == 5">1-3年</view>
									<view v-if="item.work_experience == 6">3-5年</view>
									<view v-if="item.work_experience == 7">5-10年</view>
									<view v-if="item.work_experience == 8">10年以上</view>
									<view>{{item.salary_min}}-{{item.salary_max}}K</view>
									<view>{{item.work_city}}</view>
									<view v-if="item.education == 1">不限</view>
									<view v-if="item.education == 2">初中以及以下</view>
									<view v-if="item.education == 3">中专/中技</view>
									<view v-if="item.education == 4">高中</view>
									<view v-if="item.education == 5">大专</view>
									<view v-if="item.education == 6">本科</view>
									<view v-if="item.education == 7">硕士</view>
									<view v-if="item.education == 8">博士</view>
								</view>
								<view class="job-describe-2">
									<image class="company-logo" :src="item.href" mode=""></image>
									<view class="company-info">
										<view class="company-info-name">{{item.company_name}}</view>
										<view class="company-info-address">
											<image style="width: 30rpx; height: 30rpx;" :src="item.href" mode="">
												{{item.work_place}}
										</view>
									</view>
								</view>
								<view class="job-describe-2">
									<rich-text :nodes="item.work_intro"></rich-text>
								</view>
								<view class="job-address">
										<map style="width: 540rpx; height: 300rpx;border-radius: 100rpx;"
										enable-scroll="false" :latitude="item.lat" :longitude="item.lon"></map>
								</view>
								<view class="job-contact">
									<view class="job-contact-type">
										<view>
										{{item.name}}
											<image style="width: 30rpx; height: 30rpx;vertical-align: middle;" :src="item.href" mode="">
											</image>
										</view>
										<view>{{item.name}}
											<image style="width: 30rpx; height: 30rpx;vertical-align: middle;" :src="item.href" mode="">
											</image>
										</view>
									</view>

								</view>

							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>

		</view>
	</view>

</template>
<script>
	import HOME from '@/api/home/index.js'

	export default {
		data() {
			return {
				recruitmentList: [],
				curIndex: 0, // 当前选中

				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				previousmargin: "30rpx",
				nextmargin: "30rpx",
				current: 0
			}
		},
		onLoad(opt) {
			this.getRecruitment();
			this.current = opt.idx;
		},
		methods: {
			getRecruitment() {
				HOME.recruitment(1, 10, 2).then(res => {
					this.recruitmentList = res.data.data;
				})
			},
			change(e) {
				this.current = e.detail.current;
				console.log(this.current)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.top-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -99;
		height: 300rpx;
		background-image: linear-gradient(to bottom right, #2a9f93, #2a9f93);
	}

	.content {
		position: absolute;
		top: 100rpx;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;

		.detail {
			box-sizing: border-box;
			max-width: 670rpx;
			padding: 10rpx;
			border-radius: 20rpx;
			transform: scale(0.85);
			background-color: #FFFFFF;
			font-size: 34rpx;
			box-shadow: 0px 10rpx 20rpx #ccc;
			z-index: 9999;

			&.active {
				transform: scale(1);
			}

			.detail-content {
				display: flex;
				flex-direction: column;
				font-size: 30rpx;

				.job-title {
					text-align: center;
					padding: 20rpx 0;
					font-size: 46rpx;
					font-weight: 1000;
				}

				.job-describe-1 {
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 20rpx 0;
				}

				.job-describe-2 {
					display: flex;

					padding: 20rpx 0;

					.company-logo {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.company-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 10rpx;

						.company-info-address {
							font-size: 28rpx;
						}
					}
				}

				.job-address {
					padding: 20rpx 0;
					border-radius: 20rpx;
					margin-bottom: 100rpx;
				}

				.job-contact {
					position: fixed;
					bottom: 0;
					width: 100%;
					background-color: #FFFFFF;
					padding: 20rpx 0;
					border-top: 1rpx solid #ccc;

					.job-contact-type {
						display: flex;
						justify-content: space-around;
						align-items: center;


					}

				}
			}

		}


	}
</style>
